<template>
  <div class="home" ref="home">
    <x-header>来 · 浙财<a slot="right"></a></x-header>
        <swiper height="140px" :list="dataList" auto v-model="activeIndex" @on-index-change="changeIndex"></swiper>
        <grid style="margin-bottom:5px;" :show-lr-borders="false">
          <grid-item v-for="(item,i) in tabList" :key="i" :link="item.link" :label="item.name">
            <i :style="{'color':item.color}" slot="icon" :class="item.icon"></i>
          </grid-item>
        </grid>
        <item-list :hasLikeArr="[]" :hasAttenArr="[]" @remove="handleRemove" :datalist="list" @focusman="handleFocusman"></item-list>
    <actionsheet
      v-model="showConfirm"
      :menus="cacelList"
      show-cancel
      @on-click-menu="clickMenu">
    </actionsheet>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import ItemList from './common/Item';
import {
  Grid,
  GridItem,
  Actionsheet,
  Swiper,
  XHeader
} from 'vux';
const IndexStore = namespace('list');
const HomeStore = namespace('home');

@Component({
  components: {
    ItemList,
    Grid,
    GridItem,
    Actionsheet,
    Swiper,
    XHeader
  }
})
export default class Home extends Vue {
  @HomeStore.Action getUnWatchPost;
  @HomeStore.Action getSaveCollect;
  @HomeStore.Action getWatchUser;
  @IndexStore.Action getBest10List;
  @IndexStore.State best10List;
  created () {
    this.initPostList()
  }
  activeIndex = 0;
  currentItem = null
  list = []
  id = null
  showConfirm = false
  currentPage = 1
  pageSize = 10
  file = []
  tabList = [
    { name: '财大论坛', link: '/forum/square', icon: 'icon-xiaoyuanluntan', color: '#7CBB75' },
    { name: '跑腿服务', link: '/errand/0', icon: 'icon-paotui', color: '#EAC44C' },
    { name: '课程叭', link: '/courselist', icon: 'icon-kecheng', color: '#DE625F' }
  ]
  cacelList = {
  	0: '不再看到此条帖子',
  	1: '收藏',
    2: '举报'
  }
  dataList = [
    {
      url: 'javascript:',
      img: 'http://111.231.87.118:3001/uploads/p1.jpg',
      title: '活动简介'
    },
    {
      url: 'javascript:',
      img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg',
      title: '送你一辆车'
    },
    {
      url: 'javascript:',
      img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg', // 404
      title: '送你一次旅行'
    }
  ];
  handleFocusman (item) {
    const params = {
      status: 0,
      user2Obj: item.creator
    }
    this.getWatchUser(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.$vux.toast.text('关注成功', 'middle');
      }
    })
  }
  handleRemove (item) {
    this.currentItem = item
    this.id = item._id
    this.showConfirm = true
  }
  changeIndex (index) {
    this.activeIndex = index;
  }
  userInfo = JSON.parse(localStorage.getItem('loginInfo') || '{}').user || {}
  clickMenu (key, value) {
    if (key === '2') {
      const { creator, _id } = this.currentItem
      const info = {
        _id,
        creator,
        type: 'post'
      }
      this.$router.push({
        path: `/report`,
        query: {
          info
        }
      })
    }
    if (key === '1') {
      const { _id, title } = this.currentItem;
      const params = {
        url: `/detail/${this.id}`,
        postId: _id,
        desc: title
      }
      this.getSaveCollect(params).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle');
        } else {
          this.$vux.toast.text('收藏成功', 'middle');
        }
      })
    }
    if (key === '0') {
      const params = {
        postId: this.id
      }
      this.getUnWatchPost(params).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle');
        } else {
          this.$vux.toast.text('已不再看到此帖子', 'middle');
        }
      })
    }
  }
  initPostList () {
    const params = {
      current: this.currentPage,
      pageSize: this.pageSize,
      userId: this.userInfo && this.userInfo._id
    }
    this.getBest10List(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        const { list } = this.best10List
        this.list = this.list.concat(list)
      }
    })
  }
}
</script>
<style lang="less">
.home {
  padding-top: 51px;
  .vux-swiper-desc{
    padding-left:20px !important;
  }
  .weui-grid__label {
    // font-size: 12px;
    color:#5F5F5F;
    // letter-spacing:1px;
  }
  .weui-grid__icon {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
    i {
      font-size: 41px !important;
    }
  }
  .vux-header-left {
    display: none !important;
  }
  .weui-grids {
    background: #ffffff;
    margin-top: 5px;
    .weui-grid{
      padding: 25px 10px 12px !important;
    }
  }
  .weui-cells {
    margin: 4px 0;
  }
  .vux-marquee-box li{
    font-size:15px;
    color:#5F5F5F;
  }
  .hot{
    font-size:16px;
    color:#414042;
    padding:10px 20px;
  }
  .weui-cell:before {
    content: initial;
  }
}
</style>
